<template>
    <div id="iLogs" >
        <el-row>
            <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content left">
                   <el-col :span="12"><div class="grid-content left_top">
                        <span class="greeting">Hello,Welcome to the system of task</span>
                    </div></el-col>
                   <el-col :span="24"><div class="grid-content login_tip">
                        {{tip}}
                    </div></el-col>
                   <el-col :span="3"><div class="grid-content login_choose">
                       <button @click="toTeacher" class="toTeacher"></button>
                       <button @click="toStudent" class="toStudent"></button>
                    </div></el-col>
                   <el-col :span="21"><div class="grid-content left_content">
                         <router-view></router-view>   
                    </div></el-col>
                   <el-col :span="21"><div class="grid-content left_bottom">
                        <router-link to="/Admin_login">管理员入口</router-link>
                  </div></el-col>
            </div></el-col>
            <el-col :span="15"></el-col>
        </el-row>
    </div>
</template>

<script>
import login_teacher from '../components/index/login_teacher.vue'
import login_student from '../components/index/login_student.vue'
    export default {
        data() {
            return {
              tip:'教师登录入口'
            }
        },
        methods: {
             toTeacher() {
                this.$router.push('/');
                this.tip='教师登录入口'
             },
              toStudent() {
                this.$router.push('/login_student');
                this.tip='学生登录入口'
             },

        },
        components:{login_teacher,login_student}
    }
</script>
<style>
     #iLogs .el-row {
            margin-bottom: 20px;
            &:last-child {
            margin-bottom: 0;
            }
        }
        #iLogs .el-col {
            border-radius: 4px;
        }
        #iLogs .left {
            background-color:#EBEBEB;

             height: 580px;
        }
        #iLogs .bg-purple {
              background-color:#EBEBEB;
        }
        #iLogs .left_top{
           background-color:#EBEBEB;
            height: 170px;
        }
        #iLogs .login_tip{
            background: 	#7A7A7A;
            height: 55px;
            text-align: center;
        }
        #iLogs .login_choose{
              background-color:#515151;
            height: 190px;
        }
        #iLogs .left_content{
            background: 	#DBDBDB;
            height: 190px;
        }
        #iLogs .left_bottom{
            margin-top: 100px;
             background-color:#EBEBEB;
        }
        #iLogs .toTeacher{
            background: url(../assets/100x100.png);
            width: 40px;
            height: 40px;
            float:right;
            margin-top: 60%;
        }
        #iLogs .toStudent{
            background: url(../assets/100x100.png);
            width: 40px;
            height: 40px;
            float:right;
            margin-top: 40%;
        }
        #iLogs .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        #iLogs .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }


</style>